<template>
	<div>
		<div id="header">
			<div class="star-header-title">
		        <div class="star-back" @click="backLastPage">
		          <div></div>
		        </div>
		        <div class="star-title">{{actor.name_en}} {{actor.name}}</div>
		        <div class="star-back"></div>
		    </div>
	    </div>
	    <div class="star-msg">
	        <img :src="actor.avatars.large">
	        <div>
	          <h3>影星资料</h3>
	          <p>{{actor.name}}</p>
	          <p>{{actor.name_en}}</p>
	          <p>{{actor.gender}}</p>
	        </div>
	    </div>
	    <div class="star-movie-wrap">
	        <h3 v-if="actor.gender == '男'">他的代表作品</h3>
	        <h3 v-if="actor.gender == '女'">她的代表作品</h3>
	        <div class="star-movie" @click="MovieDetail(item.subject.id)" v-for="item in actor.works">
	          	<div>
	            	<img :src="item.subject.images.small">
	          	</div>
		        <div>
		            <div>
		              <p>{{item.subject.title}}</p>
		              <p v-for="it in item.roles">{{it}}</p>
		              <p>{{item.subject.year}}</p>
		            </div>
		            <div>
		              <star :num="item.subject.rating.average*5"></star>
		              {{item.subject.rating.average}}分
		              {{item.subject.collect_count}}人评价
		            </div>
		       </div>
        </div>
      </div>
	</div>
</template>
<script>
	import star from './star'
	export default{
		data(){
			return {
				actor:{
					title:''
				}
			}
		},
		components:{
		    star:star
	  	},
		mounted:function(){
			var id = this.$route.params.id
			this.$http.jsonp('https://api.douban.com/v2/movie/celebrity/' + this.$route.params.id).then(function(response){
         this.actor = response.body;
      	})
		},
	filters: {
    limitLength: function (value) {
      return value
    },
    countStar:function(value){
    }
  },
	methods:{
    actor:function(id){
        	const path = '/actor/'
          this.$router.push({ name: 'actor', params: { id: id }})
    },
    backLastPage: function () {
          window.history.go(-1)
    },
    MovieDetail:function(id){
          const path = '/movie/'+id
          this.$router.push({ params: { id: id },path:path})
    }
  }
}

</script>
<style scoped>
  .star-header-title {
    display: flex;
    height: 50px;
    width: 100%;
    background-color: #e54847;
    padding: 6px;
    box-sizing: border-box;
  }
  .star-back {
    width: 50px;
    position: relative;
    cursor: pointer;
  }
  .star-back > div {
    position: absolute;
    top: 12px;
    left: 12px;
    height: 13px;
    width: 13px;
    border: 2px solid #fff;
    border-width: 0 0 2px 2px;
    transform: rotate(45deg);
  }
  .star-title {
    flex: 1;
    color: #fff;
    text-align: center;
    line-height: 2;
    font-size: 20px;
    overflow: hidden;
  }
  .star-msg {
    background-color: #b4b1b1;
    padding: 10px;
  }
  .star-msg img {
    width: 150px;
    height: 200px;
    margin-right: 20px;
  }
  .star-msg div {
    display: inline-block;
    font-size: 20px;
    color: #f0eeee;
    vertical-align: bottom;
  }
  .star-msg h3 {
    font-size: 25px;
    color: white;
  }
   .star-movie {
    display: flex;
    padding: 5px;
    font-size: 14px;
    border-bottom: 1px solid #d6d3d3;
  }
  .star-movie > div:first-child {
    width: 70px;
    margin-right: 10px;
  }
  .star-movie > div:last-child {
    flex: 1
  }
</style>